<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>一农</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="assets/font/iconfont.css" />
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="js/maps1.js"></script>
    <!-- <script src="js/maps.js"></script> -->
    <script src="js/public.js"></script>
    <script src="js/index.js"></script>
    <script src="js/calendar.js"></script>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav my-header">
      <div class="info">
        <div class="day">
          <strong></strong>
          <span></span>
        </div>
        <div class="bk"></div>
        <div class="local">
          <img src="./images/local.png" alt="" />
          <span id="location">定位</span>
        </div>
      </div>
      <div class="info2"></div>
      <div class="box">
        <div class="box1">
          <div class="prebox"></div>
          <div class="latbox">
            <div class="tbox"></div>
            <div class="bbox"></div>
          </div>
        </div>
        <div class="box2">
          <div class="tbox2"></div>
          <div class="bbox2"></div>
        </div>
        <div class="box3">
          <div class="tbox3"></div>
          <div class="bbox3"></div>
        </div>
      </div>
      <div id="forecast"></div>
      <div id="forecast2"></div>
      <div class="black">
        <div class="white">
          <span class="first"></span><span class="second"></span>
        </div>
        <div class="txtt"></div>
      </div>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item mui-active" href="index.html">
        <span class="mui-icon iconfont icon-fuwuzhongjiewuye my-icon"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="manage.html">
        <span class="mui-icon iconfont icon-shengchangzhouqi my-icon"></span>
        <span class="mui-tab-label">数据</span>
      </a>
      <a class="mui-tab-item" href="equipment.html">
        <span class="mui-icon iconfont icon-shebei my-icon"></span>
        <span class="mui-tab-label">服务</span>
      </a>
      <a class="mui-tab-item" href="login.html">
        <span class="mui-icon iconfont icon-wode my-icon"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="mui-content">
      <div class="nav">
        <div class="sha">
          <div class="nav-item">
            <img src="./images/shuidao.png" alt="" />
            <div class="nav-m">早稻育穗</div>
            <div class="nav-b">不适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/xiaomai.png" alt="" />
            <div class="nav-m">早麦育穗</div>
            <div class="nav-b">不适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/zhongzhi.png" alt="" />
            <div class="nav-m">早稻种植</div>
            <div class="nav-b">适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/huafang.png" alt="" />
            <div class="nav-m">早麦种植</div>
            <div class="nav-b">适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/shuiguoshucai.png" alt="" />
            <div class="nav-m">苹果蔬果</div>
            <div class="nav-b">不适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/shifei.png" alt="" />
            <div class="nav-m">蔬果施肥</div>
            <div class="nav-b">适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/clean-up.png" alt="" />
            <div class="nav-m">果园打扫</div>
            <div class="nav-b">适宜</div>
          </div>
          <div class="nav-item">
            <img src="./images/clean-up.png" alt="" />
            <div class="nav-m">作物除草</div>
            <div class="nav-b">适宜</div>
          </div>
        </div>
      </div>

      <div class="zhai">
        <div class="zhai-c">
          <div class="zhai-t">
            <span>|</span> <span>农业气象灾害预警</span>
            <span class="databox"></span>
          </div>
          <div class="zhai-b-outer">
            <div class="zhai-b">
              <div>灾害</div>
              <div>无</div>
            </div>
          </div>
          <div class="zhai-bb">未来七天<span> 无 </span>灾害预警</div>
        </div>
      </div>

      <div class="news new-news">
        <div class="news-t">
          <div class="news-t1">
            <img src="./images/hot.png" alt="" />
            专家讲座
          </div>
          <div class="news-t2">
            <a href="more.html" class="morelink">更多 ></a>
          </div>
        </div>
        <div class="news-c">
          <a href="video.html?vnum=1" class="ashell">
            <div class="news-item">
              <div class="news-item-l">
                <div class="title">
                  聚谷氨酸的农业作用及其作用机理的分析
                </div>
                <div class="item-l-b">
                  <div class="datetxt"></div>
                  <div class="views">
                    <img src="./images/eye.png" alt="" />
                    <div class="num1">3309</div>
                  </div>
                </div>
              </div>
              <div class="news-item-r">
                <img src="./images/post1.jpg" alt="" />
              </div>
            </div>
          </a>
          <a href="video.html?vnum=2" class="ashell">
            <div class="news-item">
              <div class="news-item-l">
                <div class="title">春季葡萄管理高产秘诀</div>
                <div class="item-l-b">
                  <div class="datetxt"></div>
                  <div class="views">
                    <img src="./images/eye.png" alt="" />
                    <div class="num1">2883</div>
                  </div>
                </div>
              </div>
              <div class="news-item-r">
                <img src="./images/post2.jpg" alt="" />
              </div>
            </div>
          </a>
        </div>
      </div>

      <div class="news">
        <div class="news-t">
          <div class="news-t1">新闻资讯</div>
          <div class="news-t2">更多 ></div>
        </div>
        <div class="news-c">
          <div class="news-item">
            <div class="news-item-l">
              <div class="title">全国农业气象情报</div>
              <div class="item-l-b">
                <div class="datetxt"></div>
                <div class="views">
                  <img src="./images/eye.png" alt="" />
                  <div class="num1">1016</div>
                </div>
              </div>
            </div>
            <div class="news-item-r">
              <img src="./images/air.png" alt="" />
            </div>
          </div>
          <div class="news-item">
            <div class="news-item-l">
              <div class="title">北方销区玉米价格行情</div>
              <div class="item-l-b">
                <div class="datetxt"></div>
                <div class="views">
                  <img src="./images/eye.png" alt="" />
                  <div class="num1">1318</div>
                </div>
              </div>
            </div>
            <div class="news-item-r">
              <img src="./images/yumi.jpg" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      //获取用户所在城市信息
      function showCityInfo() {
        //实例化城市查询类
        var citysearch = new AMap.CitySearch()
        //自动获取用户IP，返回当前城市
        citysearch.getLocalCity(function (status, result) {
          if (status === 'complete' && result.info === 'OK') {
            if (result && result.city && result.bounds) {
              var cityinfo = result.city
              var citybounds = result.bounds
              document.getElementById('location').innerHTML = cityinfo

              //天气获取
              AMap.plugin('AMap.Weather', function () {
                var weather = new AMap.Weather()
                //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
                weather.getLive(cityinfo, function (err, data) {
                  if (!err) {
                    $('.prebox').html(data.temperature)
                    $('.tbox').html('℃')
                    $('.bbox').html(
                      data.weather + ' ' + data.windDirection + '风'
                    )
                    $('.txtt').html(
                      cityinfo +
                        '气象局于' +
                        data.reportTime +
                        '发布最新气象信息'
                    )
                  }
                })
                //未来4天天气预报
                weather.getForecast(cityinfo, function (err, data) {
                  if (err) {
                    return
                  }
                  $('.tbox2').html(data.forecasts[1].date)
                  $('.tbox3').html(data.forecasts[2].date)
                  $('.bbox2').html(
                    data.forecasts[1].dayWeather +
                      ' ' +
                      data.forecasts[1].dayTemp +
                      '℃'
                  )
                  $('.bbox3').html(
                    data.forecasts[2].dayWeather +
                      ' ' +
                      data.forecasts[2].dayTemp +
                      '℃'
                  )
                  $('.first').html('|')
                  $('.second').html('气象')
                })
              })
            }
          } else {
            document.getElementById('location').innerHTML = result.info
          }
        })
      }
      showCityInfo()
    </script>
  </body>
</html>
